import classnames from 'classnames';
import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { ArticlesListType } from '@/store/reducer/search';
import history from '@/utils/history';
import { Image } from 'antd-mobile';
import { isHaveToken } from '@/utils/storage';
import dayjs from 'dayjs';

type ArticleItemPropsType = {
  ArticleData: ArticlesListType;
};

export default function ArticleItem(props: ArticleItemPropsType) {
  const { ArticleData } = props;
  const { type, images } = ArticleData.cover;
  return (
    <div
      className={styles.root}
      onClick={() => history.push(`/article/${ArticleData.art_id}`)}
    >
      {/* t3: 三图结构 none-mt没有图片结构  */}
      <div
        className={classnames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
        <h3>{ArticleData.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images?.map((item, index) => {
              return (
                <div className="article-img-wrapper" key={index}>
                  <Image lazy src={item} fit="cover" />
                </div>
              );
            })}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{ArticleData.aut_name}</span>
        <span>{ArticleData.comm_count}评论</span>
        <span>{dayjs().from(ArticleData.pubdate)}</span>

        {isHaveToken() && (
          <span className="close">
            <Icon type="iconbtn_essay_close" />
          </span>
        )}
      </div>
    </div>
  );
}
